<html>
  <head>
    <meta name = "viewport" content = "width = device-width">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
   <link type="text/css" rel="stylesheet" href="/stylesheets/main.css" />
   <!-- <link type="text/css" rel="stylesheet" href="/stylesheets/ui-darkness/jquery-ui-1.8.9.custom.css" />    -->
   <link type="text/css" rel="stylesheet" href="/stylesheets/ui-darkness/jquery-custom-jamie.css" />      
   <link type="text/css" rel="stylesheet" href="/stylesheets/nuggets.css" />         
   <script type="text/javascript" src="/scripts/jquery.js"></script>
   <script type="text/javascript" src="/scripts/jquery-ui-1.8.9.custom.min.js"></script>
   <script type="text/javascript" src="/scripts/jquery.validate.js"></script>
   <script type="text/javascript" src="/scripts/parseTemplate.js"></script>         
   <script type="text/javascript" src="/scripts/nuggets.js"></script>   
   <script type="text/javascript">
			$(function(){	
				// Tabs
				$('#tabs').tabs();						
			});
			
			$().ready(function() {
      	// validate the comment form when it is submitted
      	$("#createForm").validate();
      });
			
		</script>
		<script id="AutoCompleteTemplate" type="text/html">
     <# for(var i=0; i < pages.length; i++)     
        {         
             var page = pages[i]; #>
     <a class="result" index="<#= i #>" href="javascript: void 0" onclick="nuggets.autocomplete.clickResult(this)">
        <div class="name"><#= page.name #></div>
        <div class="category"><#= page.category #></div>
     </a>
     <# } #>
    </script>
 </head>
  <body class="nuggets">
    <h1 class="mainTitle">
      <span class="title jfloatl">listomania</span>
      <div class="details jfloatr">a place to keep your lists | <a href="{{ url }}">{{ url_linktext }}</a></div>
    </h1>
    <div>
      {% if signedIn %}
      <div style="margin-bottom: 20px;">
        <div><input type="text" class="autocomplete" value="Search for something" defaultValue="Search for something"/></div>        
      </div>
      <div id="auto-complete-container"></div>
      
      <h3>Lists of {{ name }}</h3>
      <ol>
      {% for list in lists %}
        <li>
          <div>{{ list.title }} <a id="expand-link-{{ list.key.id }}" href="javascript:nuggets.expandList('{{ list.key.id }}')">more</a></div>
          <div id="list-items-container-{{ list.key.id }}" style="display: none" class="list-items-container">
            <div id="list-items-{{ list.key.id }}"></div>            
          </div>
        </li>
      {% endfor %}
      <li id="create-new-list-form">
        <form action="#"onsubmit="nuggets.createList(this); return false;">
        <input type="text" name="newList" defaultValue="Create a new list" value="Create a new list" />
        <input type="submit" value="Create"/>
        </form>
      </li>
      </ol>
      {% else %}
      <h3>Log in to view and create lists</h3>
      {% endif %}
      
    </div> 
    
    <div id="fb-root"></div>
    <script>
      window.fbAsyncInit = function() {
        FB.init({appId: '2247019648', status: true, cookie: true,
                 xfbml: true});
      };
      (function() {
        var e = document.createElement('script'); e.async = true;
        e.src = document.location.protocol +
          '//connect.facebook.net/en_US/all.js';
        document.getElementById('fb-root').appendChild(e);
      }());
    </script>   
  </body>
</html>